<template>
  <view class="container" style="background-color: #fff">
    <uni-list>
      <uni-list-item title="申请编号" :rightText="rowData.id + ''" />
      <uni-list-item title="申请日期" :rightText="rowData.createTime" />
      <uni-list-item title="主题" :rightText="rowData.title" />
      <uni-list-item title="申请人" :rightText="rowData.createUserName" />
    </uni-list>
    <uni-section
      v-for="(item, index) in mxDatas"
      :title="`明细第${index + 1}行`"
      type="line"
    >
      <uni-list>
        <template v-if="rowData.approveType == '1'">
          <uni-list-item
            title="切除罐号"
            :rightText="item.deviceName || item.deviceId"
          />
          <uni-list-item
            title="切除原因"
            :rightText="item.qcyy && item.qcyy.join('，')"
          />
          <uni-list-item
            title="切除风险"
            :rightText="item.qxfx && item.qxfx.join('，')"
          />
          <uni-list-item
            title="管控措施"
            :rightText="item.gkcs && item.gkcs.join('，')"
          />
          <uni-list-item title="当前液位" :rightText="item.dqyw" />
        </template>
        <template v-else>
          <uni-list-item title="恢复罐号" :rightText="item.deviceName" />
          <uni-list-item
            title="恢复原因"
            :rightText="item.hfyy && item.hfyy.join('，')"
          />
        </template>
      </uni-list>
    </uni-section>
    <view class="sprList">
      <view class="sprList-title">审批流程</view>
      <view v-for="item in sprList" class="sprList-item">
        <view class="label">{{ item.phase + ".审批人" }}</view>
        <view class="user">{{ item.userName + "：" + item.state }}</view>
        <image
          v-if="item.signUrl"
          class="img"
          :src="formatSrc(item.signUrl)"
          style="height: 150upx"
        ></image>
      </view>
    </view>
    <template v-if="pageType == 'sp'">
      <Qianming
        v-model="rowData.signUrl"
        canvasId="signUrl"
        :open="openQm"
      ></Qianming>
      <view style="display: flex; background: #fff">
        <button
          type="primary"
          size="mini"
          @click="handleSubmit('已通过')"
          style="margin-top: 20upx"
        >
          同意
        </button>
        <button
          type="warn"
          size="mini"
          @click="handleSubmit('已驳回')"
          style="margin-top: 20upx"
        >
          驳回
        </button>
      </view>
    </template>
    <catSignature
      :canvasId="cId + ''"
      @close="closeQm"
      @save="saveQm"
      :visible="true"
      v-if="showQm"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: null,
      type: "sp",
    };
  },
  onLoad(payload) {
    this.id = payload.id;
    this.type = payload.type || "detail";
  },
};
</script>
<script setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { apis as APIS } from "@/api/sis.js";
import { router } from "@/router/index.js";
import { useAuthStore } from "@/store/modules/auth.js";
import catSignature from "@/components/cat-signature.vue";
import Qianming from "../../pages/zygl/zyxkbl/components/qianming.vue";
import { formatSrc } from "@/utils/index.js";

// 签字相关逻辑
const showQm = ref(false);
const example = ref(null);
const cId = ref(2112);
const openQm = (e) => {
  cId.value = Date.now();
  showQm.value = true;
  example.value = e;
};
const closeQm = () => {
  showQm.value = false;
};
const saveQm = (val) => {
  closeQm();
  example.value.exposed.save(val);
};
const sprList = ref([]);

const handleSubmit = (status) => {
  if (!rowData.value.signUrl) {
    uni.showModal({
      title: "未签字",
    });
    return;
  }
  let text = status.includes("驳回") ? "驳回" : "通过";
  uni.showModal({
    title: "提示",
    content: `是否确认${text}?`,
    success: function (res) {
      if (res.confirm) {
        APIS.approve({
          id: rowData.value.id,
          phase: rowData.value.phase,
          signUrl: rowData.value.signUrl,
          status,
        }).then((res) => {
          router.back();
        });
      } else if (res.cancel) {
      }
    },
  });
};
let rowData = ref({});
const mxDatas = ref([]);
const pageType = ref("");

onMounted(async () => {
  const { id, type } = getCurrentInstance().data;
  pageType.value = type;
  if (id) {
    const res = await APIS.detail(id);
    const data = res.data;
    mxDatas.value = JSON.parse(data.detaileds);
    let text = data.approveType == "1" ? "切除" : "恢复";
    let title = `SIS系统联锁${text}审批`;
    let content = `表单：石煤${text}审批`;
    sprList.value = data.sisPhases;
    rowData.value = {
      ...data,
      title,
      content,
    };
  }
});
</script>

<style lang="scss" scoped>
.container {
  padding: 16upx;
  background-color: #eee !important;
  overflow: auto;
}

.fj {
  display: flex;
  justify-content: space-between;
  font-size: 30upx;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 20upx;
  padding: 16upx;
  &-button {
    background-color: #eee;
    padding: 4upx 20upx;
    border-radius: 16upx;
  }
}
.form-top {
  display: flex;
  justify-content: space-between;
  font-size: 30upx;
  background-color: #fff;
  margin-bottom: 20upx;
  &-label {
    font-weight: 700;
  }
  &-button {
    background-color: #eee;
    padding: 4upx 20upx;
    border-radius: 16upx;
  }
}
.sis-form {
  background-color: #fff;
  border-radius: 5px;
  padding: 16upx;
}

.addmx {
  border-radius: 5px;
  margin-top: 20upx;
  background-color: #fff;
  padding: 20upx;

  &-button {
    background-color: #eee;
    padding: 14upx 0;
    border-radius: 30upx;
    text-align: center;
  }
}

.sprList {
  background-color: #fff;
  padding: 16upx;

  &-title {
    font-weight: 700;
    margin-bottom: 16upx;
  }
  &-item {
    border-top: 1px solid #eee;
    padding-top: 16upx;
    .label {
      background-color: #eee;
      max-width: 200upx;
      padding: 8upx 16upx;
      border-radius: 16upx;
      text-align: center;
    }
    .user {
      padding: 16upx;
    }
  }
}
</style>
